<template>
  <el-dialog
    :title="ruleForm.id ? '编辑部门' : '新增部门'"
    :visible.sync="operatePupShow"
    :before-close="close"
  >
    <el-form ref="form" :model="ruleForm" :rules="rules" label-width="100px">
      <el-form-item label="部门名称" prop="name">
        <el-input v-model="ruleForm.name" />
      </el-form-item>
      <el-form-item label="部门编码" prop="code">
        <el-input v-model="ruleForm.code" />
      </el-form-item>
      <el-form-item label="部门负责人" prop="manager">
        <el-select v-model="ruleForm.manager" placeholder="请选择负责人">
          <el-option
            v-for="item in emloyeeList"
            :key="item.id"
            :label="item.username"
            :value="item.username"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="部门介绍" prop="introduce">
        <el-input v-model="ruleForm.introduce" />
      </el-form-item>
      <el-form-item>
        <el-row type="flex" justify="center">
          <el-col :span="9">
            <el-button size="small" @click="close">取消</el-button>
            <el-button size="small" type="primary" @click="confirm">
              确定
            </el-button>
          </el-col>
        </el-row>
      </el-form-item>
    </el-form>
  </el-dialog>
</template>

<script>
import { employeeSimplyList } from '@/api/employee'
import { addDepart, getDepartDetail, editDepartDetail } from '@/api/depart.js'
export default {
  name: 'EditDepts',
  props: {
    operatePupShow: {
      type: Boolean,
      default: false
    },
    node: {
      type: Object,
      required: true
    },
    depts: {
      type: Array,
      required: true
    }
  },
  data() {
    // 部门名称自定义校验
    const nameRepeat = (rule, value, callback) => {
      if (this.ruleForm.id) {
        // 编辑部门
        const bool = this.depts
          .filter(
            (item) => item.pid === this.node.id && this.node.id !== item.id
          )
          .some((key) => key.name === value)
        bool ? callback(new Error('部门名称重复')) : callback()
      } else {
        // 新增部门
        const bool = this.depts
          .filter((item) => item.pid === this.node.id)
          .some((key) => key.name === value)
        bool ? callback(new Error('部门名称重复')) : callback()
      }
    }
    // 部门编码自定义校验
    const codeRepeat = (rule, value, callback) => {
      if (this.ruleForm.id) {
        // 编辑部门
        const bool = this.depts.some(
          (item) => item.code === value && item.id !== this.node.id
        )
        bool ? callback(new Error('部门编码重复')) : callback()
      } else {
        // 新增部门
        const bool = this.depts.some((item) => item.code === value)
        bool ? callback(new Error('部门编码重复')) : callback()
      }
    }
    return {
      emloyeeList: [],
      ruleForm: {
        name: '',
        code: '',
        manager: '',
        introduce: ''
      },
      rules: {
        name: [
          { required: true, message: '请输入部门名称', trigger: 'blur' },
          { validator: nameRepeat, trigger: 'blur' }
        ],
        code: [
          { required: true, message: '请输入部门编码', trigger: 'blur' },
          { validator: codeRepeat, trigger: 'blur' }
        ],
        manager: [
          { required: true, message: '请输入部门负责人', trigger: 'blur' }
        ],
        introduce: [
          { required: true, message: '请输入部门介绍', trigger: 'blur' }
        ]
      }
    }
  },
  created() {
    this.employeeSimplyList()
  },
  methods: {
    // 关闭弹出
    close() {
      this.$emit('close')
      this.$refs.form.resetFields()
      this.ruleForm = {
        name: '',
        code: '',
        manager: '',
        introduce: ''
      }
    },
    // 部门操作
    confirm() {
      this.$refs.form.validate(async (isOk) => {
        if (isOk) {
          if (this.ruleForm.id) {
            // 编辑
            try {
              await editDepartDetail(this.ruleForm)
              this.$message('修改成功')
              this.$emit('addDeptOk')
              this.close()
            } catch (err) {
              this.$message('修改失败')
            }
          } else {
            // 新增
            try {
              await addDepart({
                ...this.ruleForm,
                pid: this.node.id
              })
              this.$message('添加部门成功')
              this.$emit('addDeptOk')
              this.close()
            } catch (err) {
              this.$message('添加部门失败')
            }
          }
        }
      })
    },
    // 获取员工简单列表
    async employeeSimplyList() {
      this.emloyeeList = await employeeSimplyList()
    },
    // 根据ID查询部门详情
    async getDepartDetail() {
      const res = await getDepartDetail(this.node.id)
      this.ruleForm = res
    }
  }
}
</script>

<style></style>
